import MaskedData from "./compoents/data";
import BarChart from "./compoents/BarChart";
import "./index.scss";
function Home() {
  const HBlistX = ["石家庄", "承德", "保定", "衡水", "唐山", "廊坊", "张家口"];
  const HBlistY = [100, 110, 210, 90, 200, 150, 190];
  const ZJlistX = ["杭州", "台州", "舟山", "金华", "宁波", "温州"];
  const ZJlistY = [100, 110, 90, 200, 150, 190];
  const phone = "18803248171";
  return (
    <div className="homes">
      <div className="home">
        <BarChart
          title={"河北省GDP"}
          listX={HBlistX}
          listY={HBlistY}
        ></BarChart>
        <BarChart
          title={"浙江省GDP"}
          listX={ZJlistX}
          listY={ZJlistY}
        ></BarChart>
      </div>
      <span>39210893</span>
      <MaskedData data={phone} maskWith="*">
        {(maskedData) => (
          <div>
            Telephone: {phone.slice(0, 3)}
            {maskedData.slice(4, 8)}
            {phone.slice(7)}
          </div>
        )}
      </MaskedData>
      <MaskedData data="abc@example.com">
        {(maskedData) => <div>Email: {maskedData}</div>}
      </MaskedData>
    </div>
  );
}

export default Home;
